<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

   <body>
      <ui:composition template="/templates/template.xhtml">

         <ui:define name="title">RichFaces Extented DataTable Sort Sample</ui:define>

         <ui:define name="head">
            <style>
               .even-row {
                  background-color: #FCFFFE;
               }
               .odd-row {
                  background-color: #ECF3FE;
               }
               .row-hover {
                  background-color: #FFEBDA !important;
                  cursor: pointer;
               }
               .flag-table .rf-edt-c {
                  height: 28px;
               }
               .flag-table .rf-edt-tbl-ftr {
                  padding:0;
               }
               .flag-table .rf-tb {
                  border: 0;
               }
               .flag-table .rf-edt-ftr, .flag-table .rf-edt-tbl-ftr {
                  border: 0;
               }
            </style>
         </ui:define>

         <ui:define name="body">
            <h:form id="form">
               <!-- clientRows: number of rows fetch by the client in one ajax call
                    Bug: clientRows is not defined in the components interface
                    Bug: odd-row and even-row does not work with clientRows set
               -->
               <rich:extendedDataTable id="table" value="#{capitalsBean.capitals}" var="cap"
                                       rowClass="row" rowClasses="odd-row, even-row"
                                       style="height:450px;width:38em;overflow:visible;" styleClass="flag-table"
                                       selectionMode="single" selection="#{capitalsBean.selection}">
                  <a4j:ajax execute="@form" event="selectionchange"
                            listener="#{capitalsBean.selectionListener}"/>
                  <f:facet name="header" >
                     <div style ="width:28px;float:right;overflow:visible;height:11px;text-align:left">
                        <!-- optional: showEvent="click" -->
                        <rich:dropDownMenu mode="ajax" jointPoint="topRight" render="@form">
                           <f:facet name="label">
                              <h:panelGroup>
                                 <h:graphicImage value="/images/icons/copy.gif" styleClass="pic" alt="copy" />
                              </h:panelGroup>
                           </f:facet>
                           <rich:menuItem  label="New" icon="/images/icons/create_doc.gif" action="#{capitalsBean.menu}"/>
                           <rich:menuItem  label="Open" icon="/images/icons/open.gif" submitMode="client"
                                           onclick="document.location.href='http://labs.jboss.com/jbossrichfaces/'" />
                           <rich:menuItem  label="Flat children" action="#{capitalsBean.menu}">
                              <f:facet name="icon">
                                 <h:selectBooleanCheckbox value="#{capitalsBean.property}"/>
                              </f:facet>
                           </rich:menuItem>
                           <rich:menuSeparator id="menuSeparator11" />
                           <rich:menuItem  label="Exit" action="#{capitalsBean.menu}" />
                        </rich:dropDownMenu>
                     </div>
                     <h:outputText value="Capitals and States Table Header" style="display:block;font-size:120%;padding:3px;"/>
                  </f:facet>
                  <f:facet name="footer">
                     <div style="text-align:center;padding:5px;">
                        <rich:menuItem disabled="true" style="display:inline;width:45px;background-color:lightgray" label="New" icon="/images/icons/create_doc.gif" iconDisabled="/images/icons/create_doc.gif" action="#{capitalsBean.menu}"/>
                        <rich:menuItem style="display:inline;width:45px;background-color:lightgray" label="Edit" icon="/images/icons/create_doc.gif" action="#{capitalsBean.menu}"/>
                        <rich:menuItem style="display:inline;width:45px;background-color:lightgray" label="Delete" icon="/images/icons/create_doc.gif" action="#{capitalsBean.menu}"/>
                     </div>
                  </f:facet>
                  <rich:column id="flag" width="5em">
                     <f:facet name="header">State Flag</f:facet>
                     <h:graphicImage value="#{cap.stateFlag}" alt="flag" />
                  </rich:column>
                  <rich:column sortBy="#{cap.name}" id="name" width="8em"
                               sortOrder="#{capitalsSortingBean.capitalsOrder}">
                     <f:facet name="header">
                        <a4j:commandLink value="Sort by Capital Name" render="table"
                                         action="#{capitalsSortingBean.sortByCapitals}" />
                     </f:facet>
                     <h:outputText value="#{cap.name}" />
                  </rich:column>
                  <rich:column sortBy="#{cap.state}" id="state" width="8em"
                               sortOrder="#{capitalsSortingBean.statesOrder}">
                     <f:facet name="header">
                        <a4j:commandLink value="Sort by State Name" render="table"
                                         action="#{capitalsSortingBean.sortByStates}" />
                     </f:facet>
                     <h:outputText value="#{cap.state}" />
                  </rich:column>
                  <rich:column sortBy="#{cap.timeZone}" id="timeZone" width="8em"
                               comparator="#{capitalsSortingBean.timeZoneComparator}"
                               sortOrder="#{capitalsSortingBean.timeZonesOrder}">
                     <f:facet name="header">
                        <a4j:commandLink value="Sort by Time Zone" render="table"
                                         action="#{capitalsSortingBean.sortByTimeZones}" />
                     </f:facet>
                     <h:outputText value="#{cap.timeZone}" />
                  </rich:column>
               </rich:extendedDataTable>
            </h:form>

            <rich:jQuery selector=".flag-table tr .row" event="mouseover"
                         query="jQuery(this).addClass('row-hover')"/>
            <rich:jQuery selector=".flag-table tr .row" event="mouseout"
                         query="jQuery(this).removeClass('row-hover')"/>
         </ui:define>
      </ui:composition>
   </body>
</html>